<template>
  <div>
    <el-dialog title="用户登录" :visible.sync="showLoginDialog" width="25%" label-width="50px">
      <!-- 登录表单 -->
      <el-form :model="loginForm" ref="loginForm" :rules="loginRules">
        <el-form-item label="账号" prop="account">
          <el-input v-model="loginForm.account" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="code">
          <el-input type="code" v-model="code"></el-input>
        </el-form-item> -->
        <el-form-item class="center-button">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="text" @click="toRegistry()">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="isRegistry" width="30%">
      <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="80px">
        <!-- 账户 -->
        <el-form-item label="账户" prop="account" :rules="rules.account">
          <el-input v-model="registerForm.account" placeholder="请输入账户" size="small"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password" :rules="rules.password">
          <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" size="small"></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="confirmPassword" :rules="rules.confirmPassword">
          <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码" size="small"></el-input>
        </el-form-item>
        <!-- 昵称 -->
        <el-form-item label="昵称" prop="name">
          <el-input v-model="registerForm.name" placeholder="请输入昵称" size="small"></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="code" :rules="rules.code">
          <div class="captcha-container">
            <el-input v-model="code" placeholder="请输入验证码" size="small"></el-input>
            <el-button @click="getCheckCode" type="primary" class="captcha-btn" size="small"
              v-if="isSend">获取验证码</el-button>
            <el-button size='mini' v-if="!isSend">{{ sendmsg }}</el-button>
          </div>
        </el-form-item>
        <!-- 注册按钮 -->
        <el-form-item class="center-button">
          <el-button type="primary" @click="Register()">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
<script>
import { register, login, getCode } from '@/api/User';

export default {
  name: "login",
  props: {
    showLoginDialog: {
      default: true,
      type: Boolean,
    }
  },
  data() {
    return {
      isRegistry: false, // 控制注册框显示/隐藏
      sendmsg: '发送验证码',
      isSend: true,
      loginForm: {
        account: '',
        password: ''
      },
      registerForm: {
        account: '',
        password: '',
        confirmPassword: '',
        name: '',
      },
      user: {},
      code: "",
      loginRules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      rules: {
        account: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },],
        confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' },],
      },
    };
  },
  methods: {
    toRegistry() {
      this.isRegistry = true;
      this.showLoginDialog = false;
    },
    Register() {
      if (this.registerForm.password === this.registerForm.confirmPassword) {
        let userDto = {
          user: this.registerForm,
          code: this.code,
        }
        register(userDto).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.loginForm.account = this.registerForm.account;
            this.loginForm.password = this.registerForm.password;
            this.isRegistry = false;
            this.showLoginDialog = true;
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
        })
      } else {
        this.$message({
          message: "俩次输入的密码不一致！",
          type: 'error'
        });
        this.registerForm.password = "";
        this.registerForm.confirmPassword = "";
      }
    },
    getCheckCode() {
      getCode(this.registerForm.account).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '发送成功',
            type: 'success'
          });
          this.isSend = false;
          let timer = 60;
          this.sendmsg = timer + "s";
          this.timeFun = setInterval(() => {
            --timer;
            this.sendmsg = timer + "s";
            if (timer == 0) {
              this.isSend = true;
              this.sendmsg = "重新发送";
              clearInterval(this.timeFun);
            }
          }, 1000);
        }
      })
    },
    login() {
      // 在这里可以添加登录逻辑，验证用户名和密码等
      // 如果登录成功，可以关闭弹框，触发其他操作
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 这里添加登录逻辑，示例中直接关闭登录弹框
          login(this.loginForm).then(res => {
            this.$message({
              message: '登陆成功',
              type: 'success'
            });
            this.user = res.data.data,
            sessionStorage.setItem("userId", this.user.id);
            sessionStorage.setItem("user", JSON.stringify(this.user));
            sessionStorage.setItem("headers", JSON.stringify(res.headers));
            this.showLoginDialog = false;
            // 移除名为 "token" 的会话存储数据
            // sessionStorage.removeItem("token");
            // 触发自定义事件，通知父组件登录完成
            this.$emit('login-success');
          })
        } else {
          // 如果表单验证不通过，可以进行相应的处理
        }
      });
    }
  }
};
</script>
  
<style scoped>
/* 在这里可以添加样式 */
.center-button {
  display: flex;
  justify-content: center;
}

.captcha-btn {
  margin-left: 10px;
}

.captcha-container {
  display: flex;
  align-items: center;
}

.captcha-btn {
  margin-left: 10px;
}
</style>
  